<template>
  <div class="container">
    <h1>  </h1>
    <Category title="美食" >
      <img   width="100%" src="./assets/rou.jpg" />
    </Category>
    <Category title="游戏">
      <img width="100%" :src="sonUrl">
    </Category>
    <Category title="电影"  > <ul  >
      <li v-for="(item,index ) in films" :key="index">{{item}}</li>
    </ul>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";
export default {
  name: 'App',
  components:{Category},
  data(){
    return{
      foods:["土豆","地瓜","红薯","山药"],
      games:["王者","魔兽","吃鸡","扑克"],
      films:["变形钨钢","钢铁侠","西瓜太郎","独立日"],
      // publicPath: process.env.BASE_URL,
      sonUrl:'static/image/tou.jpg'
    }
  }
}
</script>
<style>
  .container{
    display: flex;
    justify-content: space-around;
  }
  ul{
    text-align: left;
  }
</style>
